<!DOCTYPE html>
<html>
<head>
	<title>拖拽示例</title>
	<script src="js/jquery-3.5.1/jquery-3.5.1.min.js"></script>
	<script src="js/drag.js"></script>
	<style>
		.container{
			width:300px;
			height:500px;
			margin:20px auto;
			position: relative;
			background: #ccc;
		}
		.container .box{
			position: absolute;
			width:50px;
			height:50px;
			left:0;
			top:0;
			background: red;
		}
		.option{
			position: absolute;
			left:10px;
			top:20px;
		}
		.option button{
			margin-bottom: 10px;
		}
	</style>

</head>
<body>
	<div class="option">
		<div><button data-bgColor="red" data-resize="0">创建红盒子</button></div>
		<div><button data-bgColor="blue" data-resize="1">创建蓝盒子</button></div>
		<div><button data-bgColor="yellow" data-resize="0">创建黄盒子</button></div>
	</div>
	<div class="container" id="container">
		
	</div>
</body>
</html>
	
<script>
$(function(){
	var idNum = 1;
	var boxLists = [];
	$(".option button").on('click', function(){
		var bgColor = $(this).attr('data-bgColor');
		var isResize = $(this).attr('data-resize');

		var boxId = 'box' + idNum;
		var boxHtml = `<div class="box" id="${boxId}"style="background:${bgColor};"></div>`;
		$("#container").append(boxHtml);
		var boxObj = new DragBox({
			boxId : boxId, 
			containerId : 'container',
			isResize : Boolean(Number(isResize)),
		});
		var length = boxLists.push(boxObj);
		boxObj.setIndex(length - 1);
		idNum ++;
	})
	window.boxLists = boxLists;
})
</script>


